/*=================================
            HERO SECTION
=================================*/

.hero{

    width:99%;
    max-width:1500px;
    margin:20px auto;
    padding:0 8px;
    position:relative;

}

/*=================================
            SLIDER
=================================*/

.hero-slider{

    position:relative;
    overflow:hidden;
    border-radius:25px;

}

/*=================================
            SLIDES
=================================*/

.slide{

    display:none;
    position:relative;
    animation:fade .8s ease-in-out;

}

.slide.active{

    display:block;

}

/*=================================
            IMAGE
=================================*/

.slide picture{
    display:block;
    width:100%;
    height:100%;
}

.slide picture img{

    width:100%;
    height:550px;
    display:block;
    object-fit:cover;
    border-radius:25px;
    object-position: 75% 65%;

}



/*=================================
        DARK OVERLAY
=================================*/

.slide::before{

    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.12);
    border-radius:25px;

}

/*=================================
          SLIDE CONTENT
=================================*/

.slide-content{

    position:absolute;
    top:50%;
    left:6%;
    transform:translateY(-50%);
    max-width:520px;
    z-index:2;

}

.slide-content h4{

    font-size:18px;
    color:#D4AF37;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
    font-weight:500;

}

.slide-content h1{

    font-size:58px;
    color:#fff;
    line-height:1.15;
    margin-bottom:20px;
    font-family:Georgia,serif;
    font-weight:700;

}

.slide-content p{

    color:#f5f5f5;
    font-size:18px;
    line-height:1.8;
    margin-bottom:35px;

}

/*=================================
            BUTTON
=================================*/

.hero-btn{

    display:inline-block;
    text-decoration:none;
    background:#9A7B4F;
    color:#fff;
    padding:15px 35px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    transition:.3s;

}

.hero-btn:hover{

    background:#fff;
    color:#9A7B4F;

}

/*=================================
            DOTS
=================================*/

.slider-dots{

    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:18px;

}

.dot{

    width:12px;
    height:12px;
    border-radius:50%;
    background:#d2d2d2;
    cursor:pointer;
    transition:.3s;

}

.dot.active{

    width:35px;
    border-radius:20px;
    background:#9A7B4F;

}

/*=================================
            TABLET
=================================*/

@media(max-width:992px){

    .hero{

        width:99%;
        margin:12px auto;
        padding:0 6px;

    }

    .slide picture img{

        height:520px;

    }

.slide-content{

    top:60px;
    left:6%;
    transform:none;
    max-width:380px;

}

.slide-content h4{

    font-size:15px;

}

.slide-content h1{

    font-size:36px;
    line-height:1.2;

}

.slide-content p{

    font-size:15px;
    line-height:1.7;

}

.hero-btn{

    padding:13px 30px;
    font-size:14px;

}

}

/*=================================
            MOBILE
=================================*/

@media(max-width:576px){

    .hero{

        width:99%;
        margin:10px auto;
        padding:0 5px;

    }

    .slide picture img{

        height:420px;
        border-radius:18px;

    }

    .hero-slider{

        border-radius:18px;

    }

    .slide::before{

        border-radius:18px;

    }

    .slide-content{
    top:35px;
    left:20px;
    right:20px;
    transform:none;
    max-width:100%;
 }


.slide-content h4{

    font-size:12px;
    letter-spacing:1px;

}

.slide-content h1{

    font-size:24px;
    line-height:1.3;
    margin-bottom:12px;

}

.slide-content p{

    font-size:13px;
    line-height:1.5;
    margin-bottom:20px;

}

.hero-btn{

    padding:10px 22px;
    font-size:13px;

}
}

/*=================================
        FADE ANIMATION
=================================*/

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/*=======================================================
        SHARED SECTION HEADING (used across sections)
=======================================================*/

.section-heading{
    max-width:700px;
    margin:0 auto 50px;
    text-align:center;
    padding:0 20px;
}

.section-heading h4{
    font-size:14px;
    color:#9A7B4F;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:10px;
}

.section-heading h2{
    font-size:38px;
    color:#000001;
    font-family:Georgia,serif;
    font-weight:700;
    margin-bottom:14px;
}

.section-heading p{
    font-size:15px;
    color:#6b6b6b;
    line-height:1.7;
}

/*=======================================================
              FEATURED COLLECTIONS SECTION
=======================================================*/

.featured-collections{
    max-width:1400px;
    margin:100px auto;
    padding:0 20px;
}

.collections-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.collection-card{
    position:relative;
    display:block;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 15px 35px rgba(0,0,1,.08);
}

.collection-card img{
    width:100%;
    height:420px;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
    object-position: center 70%;
}

.collection-card:hover img{
    transform:scale(1.08);
}

.collection-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    padding:30px;
    background:linear-gradient(to top, rgba(0,0,1,.75) 0%, rgba(0,0,1,.05) 60%);
}

.collection-overlay h3{
    color:#fff;
    font-family:Georgia,serif;
    font-size:24px;
    margin-bottom:6px;
}

.collection-overlay p{
    color:#e8e2d8;
    font-size:13px;
    margin-bottom:16px;
}

.collection-btn{
    display:inline-block;
    background:#9A7B4F;
    color:#fff;
    padding:10px 24px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.5px;
    transition:.3s;
}

.collection-card:hover .collection-btn{
    background:#fff;
    color:#9A7B4F;
}

/*=======================================================
                  PRODUCT GRID (shared)
=======================================================*/

.product-grid{
    max-width:1400px;
    margin:0 auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:24px;
}

.unisex-grid{
    grid-template-columns:repeat(2,1fr);
    max-width:700px;
}

.product-card{
    display:block;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,1,.06);
    transition:transform .35s ease, box-shadow .35s ease;
    text-decoration:none;
    color:inherit;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,1,.12);
}

.product-image{
    position:relative;
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:280px;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
}

.product-card:hover .product-image img{
    transform:scale(1.1);
}

.product-badge{
    position:absolute;
    top:14px;
    left:14px;
    background:#9A7B4F;
    color:#fff;
    font-size:11px;
    font-weight:600;
    letter-spacing:.5px;
    text-transform:uppercase;
    padding:6px 12px;
    border-radius:30px;
}

.product-hover-actions{
    position:absolute;
    left:0;
    right:0;
    bottom:-60px;
    display:flex;
    justify-content:center;
    padding:14px;
    background:rgba(0,0,1,.55);
    transition:bottom .35s ease;
}

.product-card:hover .product-hover-actions{
    bottom:0;
}

.quick-add-btn{
    background:#fff;
    color:#000001;
    border:none;
    padding:10px 24px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    letter-spacing:.5px;
    transition:.3s;
    font-family:inherit;
}

.quick-add-btn:hover{
    background:#9A7B4F;
    color:#fff;
}

.product-info{
    padding:20px;
    text-align:left;
}

.product-category{
    font-size:11px;
    color:#9A7B4F;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:600;
}

.product-name{
    font-size:18px;
    color:#000001;
    font-family:Georgia,serif;
    margin:8px 0 6px;
}

.product-desc{
    font-size:13px;
    color:#777;
    line-height:1.6;
    margin-bottom:14px;
}

.product-price{
    display:flex;
    align-items:center;
    gap:10px;
}

.current-price{
    font-size:16px;
    font-weight:700;
    color:#000001;
}

.old-price{
    font-size:13px;
    color:#aaa;
    text-decoration:line-through;
}

/*=======================================================
                  BEST SELLERS SECTION
=======================================================*/

.best-sellers{
    max-width:1400px;
    margin:100px auto;
}

/*=======================================================
                 WHY CHOOSE US SECTION
=======================================================*/

.why-choose-us{
    max-width:1400px;
    margin:100px auto;
    padding:70px 20px;
    background:#F5F3EF;
    border-radius:25px;
}

.features-grid{
    max-width:1300px;
    margin:0 auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.feature-card{
    background:#fff;
    text-align:center;
    padding:40px 24px;
    border-radius:16px;
    box-shadow:0 10px 25px rgba(0,0,1,.05);
    transition:transform .35s ease;
}

.feature-card:hover{
    transform:translateY(-8px);
}

.feature-icon{
    width:64px;
    height:64px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#9A7B4F;
    color:#fff;
    font-size:26px;
    border-radius:50%;
}

.feature-card h3{
    font-size:17px;
    color:#000001;
    font-family:Georgia,serif;
    margin-bottom:10px;
}

.feature-card p{
    font-size:13px;
    color:#777;
    line-height:1.7;
}

/*=======================================================
        MEN / WOMEN / UNISEX COLLECTION SECTIONS
=======================================================*/

.men-collection,
.women-collection,
.unisex-collection{
    max-width:1400px;
    margin:100px auto;
}

/*=======================================================
                 CUSTOMER REVIEWS SECTION
=======================================================*/

.customer-reviews{
    max-width:1400px;
    margin:100px auto;
    padding:0 20px;
}

.reviews-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    max-width:1300px;
    margin:0 auto;
}

.review-card{
    background:#fff;
    padding:34px;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(0,0,1,.07);
    transition:transform .35s ease;
}

.review-card:hover{
    transform:translateY(-6px);
}

.review-stars{
    color:#9A7B4F;
    font-size:16px;
    letter-spacing:3px;
    margin-bottom:16px;
}

.review-text{
    font-size:14px;
    color:#3B2F2F;
    line-height:1.8;
    margin-bottom:24px;
}

.review-author{
    display:flex;
    align-items:center;
    gap:14px;
}

.review-author img{
    width:52px;
    height:52px;
    border-radius:50%;
    object-fit:cover;
}

.author-info h4{
    font-size:15px;
    color:#000001;
    margin-bottom:2px;
}

.author-info span{
    font-size:12px;
    color:#999;
}

/*=======================================================
                    NEWSLETTER SECTION
=======================================================*/

.newsletter{
    max-width:1400px;
    margin:0 auto 100px;
    padding:70px 30px;
    background:#000001;
    border-radius:25px;
    text-align:center;
}


.newsletter-content{
    max-width:600px;
    margin:0 auto;
}


.newsletter-content h4{
    color:#D4AF37;
    font-size:11px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:12px;
}


.newsletter-content h2{
    color:#fff;
    font-size:34px;
    font-family:Georgia,serif;
    margin-bottom:12px;
}


.newsletter-content h2 strong{
    color:#C6B184;
}


.newsletter-content p{
    color:#cfcfcf;
    font-size:14px;
    line-height:1.7;
    margin-bottom:28px;
}


/*=================================
          WRITE REVIEW BUTTON
=================================*/

.write-review-btn{

    display:inline-block;

    padding:15px 30px;

    background:#9A7B4F;

    color:#fff;

    text-decoration:none;

    font-size:12px;

    font-weight:600;

    letter-spacing:1px;

    border:1px solid #D4AF37;

    border-radius:50px;

    transition:.3s;

}


.write-review-btn:hover{

    background:#fff;

    color:#9A7B4F;

    border-color:#9A7B4F;

}

/*=======================================================
             RESPONSIVE - TABLET (max 992px)
=======================================================*/

@media(max-width:992px){

    .section-heading h2{
        font-size:30px;
    }

    .featured-collections,
    .best-sellers,
    .why-choose-us,
    .men-collection,
    .women-collection,
    .unisex-collection,
    .customer-reviews{
        margin:70px auto;
    }

    .collections-grid{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

    .collection-card img{
        height:340px;
    }

    .product-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .unisex-grid{
        max-width:100%;
    }

    .features-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .reviews-grid{
        grid-template-columns:repeat(2,1fr);
    }


}

/*=======================================================
             RESPONSIVE - MOBILE (max 768px)
=======================================================*/

@media(max-width:768px){

    .collections-grid{
        grid-template-columns:1fr;
    }

    .product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .features-grid{
        grid-template-columns:1fr;
    }

    .reviews-grid{
        grid-template-columns:1fr;
    }

    .newsletter-form{
        flex-direction:column;
    }

    .newsletter-content h2{
        font-size:26px;
    }

}

/*=======================================================
             RESPONSIVE - SMALL MOBILE (max 480px)
=======================================================*/

@media(max-width:480px){

    .section-heading h2{
        font-size:24px;
    }

    .product-grid{
        grid-template-columns:1fr;
    }

    .product-image img{
        height:320px;
    }

    .why-choose-us{
        padding:50px 16px;
        border-radius:18px;
    }

    .newsletter{
        padding:50px 20px;
        border-radius:18px;
    }

}